<template>
	<div class="wx_login">
		<div class="weui-cells weui-cells_radio" style="background-color: transparent;color: white;font-weight: bold;">
			<label class="weui-cell weui-check__label">
				<div class="weui-cell__bd">
					<p>用户登录</p>
				</div>
			</label>
		</div>
		<div class="weui-cells weui-cells_form" style="background-color:transparent;">
			<div class="weui-cell">
				<div class="weui-cell__hd wd">
					<img class="img" src="../assets/img/manager/shouji.png" />
				</div>
				<div class="weui-cell__bd weui-cell_primary">
					<input type="tel" placeholder="手机号" v-model="phone" class="weui-input">
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd wd">
					<img class="img" src="../assets/img/wx/mima.png" />
				</div>
				<div class="weui-cell__bd weui-cell_primary">
					<input type="password"  placeholder="密码" v-model="password" class="weui-input">
				</div>
			</div>
			<div class="weui-cell ">
				<div class="weui-cell__hd wd">
					<img class="img" src="../assets/img/manager/code.png" />
				</div>
				<div class="weui-cell__bd ">
					<input placeholder="图形验证码"  v-model="vcode" class="weui-input">
				</div>
				<div class="weui-cell__ft">
					<Code ></Code>
				</div>
			</div>
			<div class="weui-cell ">
				<div class="weui-cell__hd wd">
					<img class="img" src="../assets/img/manager/code.png" />
				</div>
				<div class="weui-cell__bd weui-cell_primary">
					<input type="number" placeholder="手机验证码" v-model="phone_vcode" class="weui-input">
				</div>
				<div class="weui-cell__ft "><a style="color: rgb(242 163 43);" @click="createCode"
						class="weui-vcode-btn">{{data.contentDesc}}</a></div>
			</div>

		</div>
		<div class="weui-cells__tips"></div>
		<div class="weui-btn-area">
			<a @click="wxLogin" class="weui-btn weui-btn_primary">登录</a>
		</div>
		<a @click="goRegister" class="important-tips">没账户？去注册</a>
	</div>
</template>

<script>
	import Code from '@/conpon/code.vue'
	import constant from '@/utils/constant.js' //引入
	import {
		createCode
	}
	from '@/apis/common/common.js'
	import {
		formatUrlParams
	} from '@/utils/utils.js' //引入
	import {
		getToken,
		setToken,
	} from '@/utils/auth'
	import {
		wxLoginMethod
	}
	from '@/apis/wx/weixinJs.js'
	import apis from '@/utils/apis.js'
	export default {
		components: {
			Code
		},
		data() {
			return {
				//验证码相关参数
				data: {
					textFlag: true,
					contentDesc: "获取手机验证码",
					ipttime: 0,
					timeSignInterval: null,
					timeOutSign: 'Y' //是否超时
				},
				phone_vcode:'',
				vcode:'',
				original_vcode:'',
				phone:'',//登录手机号
				password:'',//登录密码
				fromUrl:'',//
			}
		},
		created() {
			//拦截跳转的
			let urlparam = this.$route.params;
			if(JSON.stringify(urlparam) != "{}"){
				this.fromUrl = urlparam['url'];
			}
		},
		methods:{
			wxLogin(){
				let isOk = this.valid();
				if(isOk){
					this.$showLoading({showLoadingToastFlag:true});
					localStorage.clear();
					wxLoginMethod(apis.wxLogin,{"telt_phone":this.phone,"password":this.password}).then(res =>{
						if (res.resultCode == constant.SUCCESS && res.data != null) {
							this.showMsg("登录成功！", null, "success");
							let data = res.data;
							const token = data.token;
							var inFifteenMinutes = new Date(new Date().getTime() +  30 * 60 * 1000);
							localStorage.setItem(constant.WX_TOKEN, token)
							localStorage.setItem(constant.TOKEN, token)
							localStorage.setItem(token, JSON.stringify(data))
							localStorage.setItem('wx_userInfo',JSON.stringify(data.userInfo) )
							if (this.fromUrl){
								this.$router.replace(this.fromUrl);
							} else {
								this.$router.replace({name:'wxMain',params:{"userCenterFlag":"true"}});
							}
							
						} else {
							this.showMsg("登录失败！", null, "danger");
						}
					this.$hideLoading();
					}).catch(err =>{
						this.$hideLoading();
					})
				}
			},
			//去注册
			goRegister(){
				this.$router.replace("/wx/user/wxRegister")
			},
			//图形吗
			setOriginCode(code){
				this.original_vcode = code;
			},
			//获取短信验证码
			createCode() {
				if(this.phone==''){
					this.showMsg(null,"手机号",null);
					return false;
				}
				if(this.vcode==""){
					this.showMsg(null,"图形验证码",null);
					return false;
				}
				if(this.original_vcode!=this.vcode){
					this.showMsg("图形验证码不一致",);
					return false;
				}
				this.startSignIterval();
				
			},
			startSignIterval() {
				let maxTime = 180; //10;//180
				this.data.timeOutSign = "N";
				this.data.textFlag = false;
				this.data.timeCon = "有效期：" + maxTime + "S";
				this.data.timeSignInterval = setInterval(() => {
					//console.log("rest timeSign1:"+maxTime);
					this.data.ipttime = maxTime;
					maxTime--;
			
					if (maxTime < 1) {
						this.data.contentDesc = "获取手机验证码";
						this.data.textFlag = true;
						clearInterval(this.data.timeSignInterval);
					} else {
						this.data.contentDesc = "有效期：" + maxTime + "s";
					}
					if (maxTime == 0) {
						timeOutSign = "Y";
						this.data.ipttime = maxTime;
						return false;
					}
				}, 1000);
			},
			valid() {
				if(this.phone==''){
					this.showMsg(null,"手机号",null);
					return false;
				}
				if(this.vcode==""){
					this.showMsg(null,"图形验证码",null);
					return false;
				}
				if(this.original_vcode!=this.vcode){
					this.showMsg("图形验证码不一致",);
					return false;
				}
				if(this.phone_vcode==""){
					this.showMsg(null,"手机验证码",null);
					return false;
				}
				//测试
				this.data.timeOutSign = "Y";
				//测试
				if(this.data.timeOutSign=="N"){
					this.showMsg("手机验证码已过期");
					return false;
				}
				return true;
			},
			showMsg(text, msg, type) {
				this.$toast({
					text: text || '请输入' + msg + "!",
					type: type || 'warning',
					duration: 1000
				});
			
			},
		},
		destroyed() {
			clearInterval(this.data.timeSignInterval);
		}
	}
</script>

<style>
	.wx_login {
		/* background-image: url(../assets/bg.jpg); */
		background-color: wheat;
		height: 100%;
		height: 100%;
		overflow: auto;
	}

	.weui-cells {
		background-color: transparent
	}

	.img {
		width: 45%;
	}

	.wd {
		width: 20%;
	}
</style>
